import React from 'react';
import './vertical_2.css';


class Vertical_2 extends React.Component {

    constructor(props){
        super(props);
    }
    render(){

        const {datainfo}=this.props;
        let div1style={width:'20px',height:'20px',display:'inline-block',background:'#ffbc82'}
        let div2style={height:'20px',fontSize:'12px',display:'inline-block',position:'absolute',background:'#ffbc82',lineHeight:'20px',color:'#ffffff',padding:'0 10px 0 0',textOverflow:'ellipsis',overflow:'hidden',whiteSpace:'nowrap',maxWidth:'calc(100% - 20px)'}
        let div3Style={width:'10px',height:'20px',background:'#ffffff',borderTopRightRadius:'10px',borderBottomRightRadius:'10px'}
        let timeLineContentStyle={margin:'1em 0',borderRadius:'5px'}
        return<div>
        { datainfo!=null&&datainfo.length>0?
    <div  class=" timeline-vertical-2" >
            {
                datainfo.map((item,i)=>{
                let contentdata=item.content;
                let contentArr=contentdata.split(/\n/g);
                return <div class="timeline-content-vertical-2">
                            <div class="timeline-img-vertical-2 ">
                            </div>
                            <div class="timeline-datainfo-vertical-2">
                                <div>
                                    <div class="timeline-date-vertical-2">
                                        <div className="dateinfo-right-vertical-2" style={div1style}><div style={div3Style}></div></div>
                                        <div className="dateinfo-vertical-2" style={div2style}>{item.timeline}</div>
                                    </div>
                                </div>
                                <div className="content-vertical-2" style={timeLineContentStyle}>
                                    <div style={{padding:'5px 10px 5px 10px',fontSize:'12px'}}>
                                        {
                                            contentArr.map((item,i)=>{
                                                if(item==""){
                                                    return <span style={{display:'block',height:'20px'}}></span>
                                                }
                                                return <span className={"wea-f12"} style={{paddingLeft:'6px',paddingRight:'6px',display:'block'}}>{item}</span>
                                            })
                                        }
                                    </div>
                                </div>
                                </div>
                            </div>
            })

    }

    </div>
    :
    <div style={{textAlign:'center'}}><img src="/spa/portal/images/timelinestyle/nodata.png" /></div>
    }
    </div>
    }

}
export default Vertical_2